import React, { PropTypes, Component } from 'react';
import { reduxForm } from 'redux-form';
import { Modal, Button, ControlLabel, FormControl, FormGroup, HelpBlock } from 'react-bootstrap';
import Select from 'react-select';
import _ from 'lodash';

import { notify } from 'react-notify-toast';


const img = require('../../assets/images/loading.gif');

const validate = (values, props) => {
  const errors = {};
  if (!values.progress) {
    errors.progress= '必填';
  }
  return errors;
};

@reduxForm({
  form: 'settings',
  fields: [ 'id', 'progress', 'situation' ],
  validate
})


export default class EditModal extends Component {
  constructor(props) {
    super(props);
    this.state = { ecode: 0 };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleCancel = this.handleCancel.bind(this);
  }

  static propTypes = {
    // i18n: PropTypes.object.isRequired,
    submitting: PropTypes.bool,
    invalid: PropTypes.bool,
    dirty: PropTypes.bool,
    values: PropTypes.object,
    fields: PropTypes.object,
    handleSubmit: PropTypes.func.isRequired,
    close: PropTypes.func.isRequired,
    data: PropTypes.object.isRequired,
    initializeForm: PropTypes.func.isRequired,
    update: PropTypes.func.isRequired,
    create: PropTypes.func.isRequired
  }


  async handleSubmit() {
    const { values, update, close } = this.props;
    const dataid= this.props;

    const ecode = await update(dataid.id, _.extend(_.omit(values, ['id'])));
    if (ecode === 0) {
      this.setState({ ecode: 0 });
      close();
      notify.show('项目已更新。', 'success', 2000);
    } else {
      this.setState({ ecode: ecode });
    }
  }

  handleCancel() {
    const { close, submitting } = this.props;
    if (submitting) {
      return;
    }
    this.setState({ ecode: 0 });
    close();
  }

  componentWillMount() {
    const { initializeForm, data } = this.props;
    initializeForm(data);

  }

  render() {
    const { fields: { id, progress,situation }, dirty, handleSubmit, invalid, submitting, data } = this.props;
    const progressOptions = [{ label: '0%', value: 0 }, { label: '25%', value: 25 }, { label: '50%', value: 50 }, { label: '75%', value: 75 }, { label: '100%', value: 100 }];
    const situationOptions = [{ label: '未开始', value: 0 }, { label: '正常', value: 1 }, { label: '延迟', value: 2 }, { label: '严重延迟', value: 3 }, { label: '完成', value: 4 }];
    const dataid= this.props;

    return (
      <Modal { ...this.props } onHide={ this.handleCancel } backdrop='static' aria-labelledby='contained-modal-title-sm'>
        <Modal.Header closeButton style={ { background: '#f0f0f0', height: '50px' } }>
          <Modal.Title id='contained-modal-title-la'>项目设置</Modal.Title>
        </Modal.Header>
        <form onSubmit={ handleSubmit(this.handleSubmit) } onKeyDown={ (e) => { if (e.keyCode == 13) { e.preventDefault(); } } }>
          <Modal.Body>
            <FormGroup controlId='formControlsSelect'>
              <ControlLabel>进度</ControlLabel>
              <Select disabled={ submitting } options={ progressOptions } simpleValue clearable={ false } value={ progress.value || 0 } onChange={ newValue => { progress.onChange(newValue) } } placeholder='项目进度'/>
            </FormGroup>
            <FormGroup controlId='formControlsSelect'>
              <ControlLabel>状态</ControlLabel>
              <Select disabled={ submitting } options={ situationOptions } simpleValue clearable={ false } value={ situation.value || 1 } onChange={ newValue => { situation.onChange(newValue) } } placeholder='项目状态'/>
            </FormGroup>

          </Modal.Body>
          <Modal.Footer>
            <img src={ img } className={ submitting ? 'loading' : 'hide' }/>
            <Button disabled={ !dirty || submitting || invalid } type='submit'>确定</Button>
            <Button bsStyle='link' disabled={ submitting } onClick={ this.handleCancel }>取消</Button>
          </Modal.Footer>
        </form>
      </Modal>
    );
  }
}